home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / DHTML - Mouseover Images / img-spotlight.izs < prev    next >
Text File  |  2005-09-01  |  4KB  |  160 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Image Spotlight effect
  4. <!/TITLE>
  5.  
  6. <!BROWSER>IE5+<!/BROWSER>
  7.  
  8. <!DESCRIPTION>Cast an interactive "spotlight" on the image of your choice using this DHTML script. Move the light about using your mouse. This cool effect works in IE4+, degrading well with the rest.
  9. <!/DESCRIPTION> 
  10.  
  11. <!CATEGORY>mouseover images<!/CATEGORY>
  12.  
  13. <!SCRIPT>
  14. <!-- START OF SCRIPT -->
  15. <!-- Step 1: Insert the following stylesheet into the <head> section of your page: -->
  16. <style>
  17. <!--
  18.  
  19. #myimage{
  20. filter:light
  21. }
  22.  
  23. -->
  24. </style>
  25. <!-- Step 2: Then, add the below code to the <BODY> section of your page: -->
  26. <img id="myimage" src="theimage.jpg">
  27.  
  28. <script language="JavaScript1.2">
  29.  
  30. //Image spotlight effect- By Erik F (die_schlampe@hotmail.com)
  31. //Code enhancements by Dynamicdrive.com
  32. //Visit http://www.dynamicdrive.com for this script
  33.  
  34. s = 50; // the size of the spotlight
  35. vp = 10; // the visibility percent of the picture
  36. startx = 0; // the top position of your sportlight into the image (on start)
  37. starty = 0; // the left position of your spotlight into the image (on start)
  38.  
  39.  
  40. //////////////////////////////////////////////////////////////////
  41. //        No need to edit below this line            //
  42. //////////////////////////////////////////////////////////////////
  43.  
  44. var IE = document.all?true:false
  45.  
  46. function moveL()
  47. {
  48. xv = tempX;
  49. yv = tempY;
  50. myimage.filters.light.MoveLight(1,xv,yv,s,true);
  51. }
  52.  
  53. if (IE&&myimage.filters)
  54. document.all.myimage.onmousemove = getMouseXY;
  55. var tempX = 0
  56. var tempY = 0
  57.  
  58.  
  59. function getMouseXY(e) {
  60. tempX = event.offsetX
  61. tempY = event.offsetY
  62.  
  63.   if (tempX < 0){tempX = 0}
  64.   if (tempY < 0){tempY = 0}
  65.   if (t)
  66.   {  
  67.    moveL();
  68.   }
  69.  
  70.   return true
  71. }
  72.  
  73. var xv = startx;
  74. var yv = starty;
  75. var t= true;
  76. if (IE&&myimage.filters){
  77. myimage.style.cursor="hand";
  78. myimage.filters.light.addAmbient(255,255,255,vp)
  79. myimage.filters.light.addPoint(startx,starty,s,255,255,255,255)
  80. }
  81.  
  82. </script>
  83. <!-- END OF SCRIPT -->
  84. <!/SCRIPT>
  85.  
  86. <!PREVIEW>
  87. <!-- START OF SCRIPT -->
  88.  
  89. <!-- Step 1: Insert the following stylesheet into the <head> section of your page: -->
  90. <style>
  91. <!--
  92.  
  93. #myimage{
  94. filter:light
  95. }
  96.  
  97. -->
  98. </style>
  99. <!-- Step 2: Then, add the below code to the <BODY> section of your page: -->
  100. <img id="myimage" src="theimage.jpg">
  101.  
  102. <script language="JavaScript1.2">
  103.  
  104. //Image spotlight effect- By Erik F (die_schlampe@hotmail.com)
  105. //Code enhancements by Dynamicdrive.com
  106. //Visit http://www.dynamicdrive.com for this script
  107.  
  108. s = 50; // the size of the spotlight
  109. vp = 10; // the visibility percent of the picture
  110. startx = 0; // the top position of your sportlight into the image (on start)
  111. starty = 0; // the left position of your spotlight into the image (on start)
  112.  
  113.  
  114. //////////////////////////////////////////////////////////////////
  115. //        No need to edit below this line            //
  116. //////////////////////////////////////////////////////////////////
  117.  
  118. var IE = document.all?true:false
  119.  
  120. function moveL()
  121. {
  122. xv = tempX;
  123. yv = tempY;
  124. myimage.filters.light.MoveLight(1,xv,yv,s,true);
  125. }
  126.  
  127. if (IE&&myimage.filters)
  128. document.all.myimage.onmousemove = getMouseXY;
  129. var tempX = 0
  130. var tempY = 0
  131.  
  132.  
  133. function getMouseXY(e) {
  134. tempX = event.offsetX
  135. tempY = event.offsetY
  136.  
  137.   if (tempX < 0){tempX = 0}
  138.   if (tempY < 0){tempY = 0}
  139.   if (t)
  140.   {  
  141.    moveL();
  142.   }
  143.  
  144.   return true
  145. }
  146.  
  147. var xv = startx;
  148. var yv = starty;
  149. var t= true;
  150. if (IE&&myimage.filters){
  151. myimage.style.cursor="hand";
  152. myimage.filters.light.addAmbient(255,255,255,vp)
  153. myimage.filters.light.addPoint(startx,starty,s,255,255,255,255)
  154. }
  155.  
  156. </script>
  157. <!-- END OF SCRIPT -->
  158. <!/PREVIEW>
  159.  
  160. <!RELATED>NONE<!/RELATED>